<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <t-dialog
    v-model:visible="visible"
    header="绑定邮箱"
    width="550px"
    mode="modeless"
    class="lg-modal user-picker-modal"
    draggable
    @confirm="ok"
    @closed="closed"
  >
    <t-form ref="formRef" :data="model">
      <t-form-item label="邮箱地址" name="email" :rules="rules.email('请输入有效的邮箱地址')">
        <t-input v-model="model.email" />
      </t-form-item>
      <t-form-item label="图形验证码" name="captcha" :rules="rules.required('请输入图形验证码')">
        <t-input v-model="model.captcha">
          <template #suffix>
            <img class="inner-img" :src="captchaImg" @click="getCaptcha()" />
          </template>
        </t-input>
      </t-form-item>
      <t-form-item v-if="model.captcha" label="邮箱验证码" name="code" :rules="rules.required('请输入邮箱验证码')">
        <t-input-adornment>
          <t-input v-model="model.code" placeholder="请输入内容" />
          <template #append>
            <div v-if="countdown.count">{{ countdown.count }}秒后重试</div>
            <t-button v-else theme="primary" @click="seanCode">发送验证码</t-button>
          </template>
        </t-input-adornment>
      </t-form-item>
    </t-form>
    <template #footer>
      <t-button variant="outline" @click="visible = false"> 取消 </t-button>
      <t-button @click="ok">确定</t-button>
    </template>
  </t-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import * as commonApi from '@/api/common';
import { message, rules, useCountdown } from '@/soar';

const emits = defineEmits(['ok', 'change', 'update:modelValue']);
const formRef = ref();
const visible = ref(false);
const model = ref({
  email: '',
  captcha: '',
  code: '',
});
const captchaImg = ref('');

const { data: countdown, reset } = useCountdown(0);
function seanCode() {
  formRef.value.validate({ fields: ['email', 'captcha'] }).then((res: any) => {
    if (res === true) {
      reset(60);
    }
  });
}

function getCaptcha() {
  commonApi.captcha('login').then((res) => {
    captchaImg.value = res;
  });
}
getCaptcha();

function closed() {
  visible.value = false;
}

/**
 * 点击确定时
 */
function ok() {
  formRef.value.validate().then((res: any) => {
    if (res === true) {
      message.error('请自行实现');
    }
  });
}

function open(params: any) {
  visible.value = true;
}

defineExpose({
  open,
});
</script>
<script lang="ts">
export default {
  name: 'BindEmailModal',
};
</script>
<style lang="less" scoped>
.user-picker {
  .t-tabs,
  .user-picker-user {
    height: 60vh;
  }
  .user-picker-user {
    overflow-y: auto;
  }
  .inner-tag-0 {
    color: var(--app-color-primary-5);
  }
  .inner-tag-1 {
    color: var(--app-color-primary);
  }
  .inner-tag-2 {
    color: var(--td-warning-color);
  }
  .inner-tag-3 {
    color: var(--td-success-color);
  }
}
.user-picker-item {
  flex: 1;
  text-align: left;
  line-height: 32px;
  .t-icon-close {
    display: none;
    color: red;
    font-size: 22px;
    transition: font-size;
  }
  &:hover {
    .t-icon-close {
      display: unset;
    }
  }
}
</style>
